Hexo 主题制作

一、前言

之前的主题用的是默认的，网上也下载使用过别人写的主题，但是终究还是想用自己写的。所以就写了这个主题——Yin。

制作一个 hexo 主题需要提前了解一些知识：

  • 模板引擎：我使用的模板引擎是 pug，好处是代码的复用。

  • CSS预处理：我使用的 CSS 预处理器是 Stylus，好处也是代码的复用。

  • Hexo 文档：主要了解 hexo 相关配置。

二、项目创建

创建项目可以用命令行直接生成脚手架，也可以自己一个文件一个文件的写。

在 themes 目录中创建一个文件夹并起个名字，在主题的 _config.yml 中，找到 theme: landsacpe 的字样并替换成成你项目的名字。然后手动创建layout， source 文件夹。

1
2
3
.
├── layout # 页面模板文件
└── source # 主题资源文件，包括页面样式，脚本，字体等

说明：写模板之前需要知道要写什么东西，其实说白了就是 layout 中写写 html，source 中写写 css。你需要知道你要写哪些页面，比如主页，关于，存档，标签，还有详情页，而这些页有很多地方也相似，比如头部，底部，还有 html head标签中的内容，这些不需要每个文件中都写一遍，可以把相同的地方统一写出来，然后去那些页里导入。总之，写的时候要有模块化的思想。

在 layout 中创建 index.pug 文件，这是主页。在同级的 includes 中创建 layout.pug 文件，这个是所有页面都要继承的部分。里面不要臃肿的写一堆代码，划分好模块，交给其他模块去处理，这样后期也好维护。比如这里的 head、header、footer。

在 index.pug 中导入模块

1
extends includes/layout.pug

运行 hexo s，去这里 http://localhost:4000/ 预览。

之后边写也要去 source 目录下写写样式。CSS 预处理处理能代码复用，对于全局样式的控制也是非常方便。

三、页面数据来源

1、站点的配置文件_config.yml

2、Hexo预置（变量、辅助函数）

Hexo预置的变量主要有site、page、post和theme。

  • site变量：可以获取站点的文章总数，标签总数和分类总数。
1
2
3
4
5
6
site = {
  posts: [object object], // 包含文章对象的数组
  pages: [object object], // 包含页面对象的数组
  categories: [object object], // 包含分类对象的数组
  tags: [object object] // 包含标签对象的数组
}

  • page变量：代表当前页所有文章的相关信息。

  • post变量：代表某一篇文章的具体信息。post变量比 page变量多了这一篇文章的tags、categories和published变量。

  • theme变量：代表主题的配置。

Hexo预置的辅助函数，常用的我觉得有如下几个：

1）is_home、is_post、is_tag、is_category、is_post等几个判断当前文章类型的函数

2）date、time等时间字符串处理函数

3）list_categories、list_tags、tagcloud等生成分类列表、标签列表、标签云等函数

4）toc 生成文章目录

5）paginator 生成页面页码

3、主题的配置文件_config.yml

四、实现

前面提到 layout.pug 是很多页面都要复用的一个模块，他里面的很多结构也是拆开来写。

1、layout.pug 模块制作

1）博客头部制作

博客头部在 header.pug 文件中，会作为模块导入到 layout.pug 文件中。这里的实现比较简单，主要利用了 url_for() 辅助函数将相对路径转为页面的绝对路径。theme.menu 会去读你主题的配置文件_config.yml 中导航菜单的设置。

1
2
3
4
5
6
7
8
9
10
11
header#header
  nav#navbar
    span.nav-left
      div.tou-img
        img(src="/img/tou.jpg")
      a#site-name(href=url_for('/')) #[=config.title]
    i.fa.fa-bars.toggle-menu.nav-right(aria-hidden="true")

    span.nav-right.menus
      each url, label in theme.menu
        a.site-page(href=url)= label

2）博客中间内容部分制作

因为中间内容部分那个页面都不一样，所以这里中间部分不会写死。

3）博客尾部制作

尾部主要写一些声明。

layout.pug 文件制作完就能开始着手页面的制作了。

2、主页制作

1
2
3
4
5
extends includes/layout.pug

block content
  include includes/recent-posts.pug
  include includes/partial/pagination.pug

主页的制作是在 layout.pug 文件 的基础上去实现，主要要实现文章和页码两部分。文章信息的获取要用到 hexo 为我们提供的变量，这里的制作主要就是在调 page 上的变量。

页码的制作利用 paginator函数去实现

1
2
3
4
5
6
7
8
9
10
-
  var options = {
    prev_text: '<i class="fa fa-chevron-left"></i>',
    next_text: '<i class="fa fa-chevron-right"></i>',
    mid_size: 1
  }
nav#pagination
  if(!is_post())
    .pagination
      !=paginator(options)

3、文章详情页制作

文章详情页是 post.pug 文件，这里的制作主要是些样式让页面变得好看一些。其次就是一些扩展的功能。

1）微信打赏

在站点的配置文件 _config.yml 中对是否开启该功能和打赏的图片做设置

1
2
3
reward:
  enable: true
  alipay: /img/weixin.jpg

然后在文章详情页（post.pug）中进行引用。

1
2
3
4
if (theme.reward.enable)
    .qr-code
    img.qrcode-img(src=(theme.reward.alipay))
    .qrcode-desc='微信打赏'

2）页码

这里的页码和主页的页码有些区别，这里只需要能切换上上一篇和下一篇文章即可。所以在去之前页码的模块中兼容一下。

1
2
3
4
5
6
7
8
9
10
if(page.prev)
 .prev-post.pull-left
    a(href=url_for(page.prev.path))
      i.fa.fa-chevron-left
      span=page.prev.title
if(page.next)
  .next-post.pull-right
    a(href=url_for(page.next.path))
      span=page.next.title
      i.fa.fa-chevron-right

3）评论功能

这里的制作需要借助第三方插件进行制作，这里提供两种选择，这里提供一下我站点的配置文件 _config.yml 中的配置，至于代码中的引用直接去 commonts 目录下看代码即可。

1
2
3
4
5
6
7
8
9
# gitalk 
gitalk:
  enable: true
  id: ''
  owner: 。。。
  admin: 。。。
  repo: 。。。
  client_id: 。。。
  client_secret: 。。。
1
2
3
4
5
# Disqus 
disqus:
  enable: false
  shortname: 。。。
  count: true

4、关于页制作

在 source 目录下创建 about 文件夹，用于存放关于页。我只想简单写点信息，所以直接建了个 index.md 文件写了点东西，样式调整了一下。

5、存档页制作

存档页相当于做了个文章的时间线，

1
2
3
4
5
6
7
8
9
10
11
12
mixin articleSort(posts)
  .article-sort
    - var year
    - posts.each(function (article) {
      - var tempYear = date(article.date, 'YYYY')
      if tempYear !== year
        - year = tempYear
        .article-item.year= year
      .article-item
        time.article-item__time= date(article.date)
        a.article-item__title(href=url_for(article.path))= article.title || 'No Title'
    - })

6、标签页制作

主要利用 list_tags() 函数实现，在主页中做判断决定显示内容。

1
2
3
4
5
if page.type === 'tags'
  article#tag
    h1.tag-title= '标签'
    hr
    .tag-cloud-tags!= list_tags()

五、发布

在 Hexo 的官方 fork 站点，然后编辑source/_data/theme.yml文件，添加信息示例：

1
2
3
4
5
6
7
8
- name: Yin
  description: A simple & beautiful & fast theme for Hexo
  link: https://github.com/Yin-Hongwei/hexo-theme-Yin
  preview: https://yin-hongwei.github.io/
  tags:
    - simple
    - beautiful
    - fast

在 source/theme/screenshots/文件夹里放置一张和你主题名字一样尺寸的图片，大小是800*500。

提交修改后的信息到自己fork的仓库里。最后向官方站点发起一个pull request 即可

微信打赏
标签: Hexo